<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>

<script>
import { uniqueId, debounce } from 'lodash-es';
import { HCVSPlayer } from './webclient.js';
import { parseJson } from '../../../utils/index.js';

export default {
  props: {
    channel_id: String,
    stream_type: String, // stream_type='0':主码流,='1':子码流;  默认子码流
  },
  data() {
    return {
      id: 'HCVSPlayer_' + uniqueId() + '_' + Date.now(),
    };
  },
  mounted() {
    this.connect();
  },
  unmounted() {
    this.destroy();
  },
  methods: {
    reconnect() {
      if (!Number.isFinite(this.count)) {
        this.count = 3;
      }
      if (this.count-- > 0) {
        setTimeout(() => {
          this.connect();
        }, 3000);
      } else {
        if (window.confirm('插件启动失败，请检查插件是否安装！\n是否需要立即下载插件？')) {
          window.open('https://m.xinwangzn.com:8081/downloadfile/HCVSWebClient.exe', '_blank');
        }
      }
    },
    connect() {
      HCVSPlayer.init(null);
      HCVSPlayer.connect(
        this.$attrs.ws_port || 9910,
        (e) => {
          const data = parseJson(e, {});
          this.$message.error(data.desc);
          this.reconnect();
        },
        (e) => {
          this.register(parseJson(e, {}));
        },
        (e) => {
          console.log(parseJson(e, {}));
        },
        (e) => {
          const data = parseJson(e, {});
          if (data.cmd === 'register') {
            // console.log(data);
            this.handleRegister(data);
          }
          if (data.cmd === 'open_channel') {
            // console.log(data);
          }
        }
      );
    },
    register() {
      let { ip, port, account, password } = this.$attrs;
      ip = ip || '118.112.187.210';
      port = port || 9901;
      // account = account || 'tb1';
      // password = password || 'Ch-111111!';
      account = account || 'webmengzw';
      password = password || 'Mengzw@20131129';
      HCVSPlayer.register(ip, port, account, password);
    },
    play() {
      let { channel_id, stream_type } = this.$props;
      /* channel_id,stream_type 都必须要字符串类型 */
      channel_id = String(channel_id);
      stream_type = stream_type ? String(stream_type) : '1';
      // console.log(document.getElementById(this.id));
      // debugger;
      if (HCVSPlayer.isOpenSubChannel(this.id)) {
        HCVSPlayer.closeSubChannel(this.id);
      }
      // HCVSPlayer.openSubChannel('2363', '0', this.id);
      HCVSPlayer.openSubChannel(channel_id, stream_type, this.id);
    },
    handlePlay() {
      if (typeof this.playWatcher === 'function') {
        this.playWatcher();
      }
      this.playWatcher = this.$watch(
        () => this.$props,
        debounce(() => {
          console.log('watch $props: ', this.$props);
          this.play();
        }, 300),
        { immediate: true, deep: true }
      );
    },
    handleRegister(data) {
      if (data.result === 'success') {
        this.handlePlay();
      } else if (data.result === 'error') {
        this.$message.error('视频服务器链接失败！');
      }
    },
    destroy() {
      HCVSPlayer.unregister();
      HCVSPlayer.unInit();
    },
  },
};
</script>

<style scoped lang="less"></style>
